<template>
	<view class="box">
		<view class="head_content">
			<CustomNavbar title="Checkout counter" color="#fff" bg="#111111"></CustomNavbar>
		</view>
		<view class="bag">
			<view class="timebox">
				<template v-if="from == 'afterPay'">
					<image src="https://file.91xft.cn:9002/static/xiquanyi/shijian-7%402x.png" class="time"></image>
					Please pay
				</template>
				<template v-else>
					<image src="https://file.91xft.cn:9002/static/xiquanyi/shijian-7%402x.png" class="time"></image>
					Please complete payment within {{ countdown }}
				</template>
			</view>
			<view class="moneybox"><text style="margin-right: 10rpx; font-size: 48rpx">$</text>{{ info.pay_amount }}</view>
		</view>
		<view class="zhifubox">
			<view class="fukan">Select Payment Method</view>
			<template v-for="(item, index) in zhufu">
				<view :class="['ccc', item.disabled ? 'disabled' : '']" :key="item.id" @click="choose(item, index)">
					<image :src="item.zhifuimg" class="wxzf"></image>
					<view class="content">
						{{ item.zhifuname }}{{ item.amount ? '（卡内余额：' + item.amount + '）' : '' }}
						<image src="./activeIcon.png" :class="item.isChoose === true ? 'showimg' : 'dis'"></image>
						<image src="./inactiveIcon.png" :class="item.isChoose === false ? 'showimg' : 'dis'">
						</image>
					</view>
				</view>
			</template>
		</view>
		<view class="btn" @click="gopay">Pay</view>
	</view>
</template>

<script>
	import CryptoJS from 'crypto-js/crypto-js'
	import { ApplePay } from '../../common/utils/applePay.js'
	const defaultZhifu = [{
			id: 0,
			zhifuimg: 'https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/more/%E4%BD%8D%E5%9B%BE%E5%A4%87%E4%BB%BD%202%402x.png',
			zhifuname: '微信支付',
			isChoose: false,
			disabled: true,
			payType: 'weixin_wap'
		},
		{
			id: 1,
			zhifuimg: 'https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/more/%E4%BD%8D%E5%9B%BE%E5%A4%87%E4%BB%BD%203%402x.png',
			zhifuname: '支付宝支付',
			isChoose: true,
			disabled: false,
			payType: 'alipay_wap'
		}, {
			id: 2,
			zhifuimg: '../../static/icons/svg/apple_pay.svg',
			zhifuname: 'In-App Purchase',
			isChoose: false,
			disabled: false,
			payType: 'apple_pay'
		}
	]
	export default {
		data() {
			return {
				payResult: '-1',
				from: 'afterPay',
				countdown: '00:00:00',
				zhufu: [{
					id: 2,
					zhifuimg: '../../static/icons/svg/apple_pay.svg',
					zhifuname: 'In-App Purchase',
					isChoose: true,
					disabled: false,
					payType: 'apple_pay'
				}],
				isSendPay: false,
				payForm: {},
				info: { payType: defaultZhifu[0].payType },
				providerList: [],
				payment: {},
				iapChannel: null,
				isIos: false,
				applePay: null
			}
		},
		onLoad(options) {
			this.info = options
			console.log(options)
			let isIos = uni.getSystemInfoSync().platform == 'ios'
			if (isIos) {
				let list = defaultZhifu.filter(e => e.id === 2)
				list[0].isChoose = true
				this.zhufu = list
				this.applePay = new ApplePay()
			} else {
				this.zhufu = defaultZhifu.filter(e => e.id === 1 || e.id === 0)
			}
		},
		onShow() {
			const vm = this
			if (this.isSendPay) {
				uni.showModal({
					title: '支付提示',
					content: '是否支付成功',
					success: res => {
						if (res.confirm) {
							//TODO 校验订单
							console.log('用户点击确定')
							vm.isSendPay = false
							vm.$request(vm.payForm.query_url).then(resp => {
								if (resp.status == 'succeeded') {
									uni.redirectTo({ url: `/pages/paySuccess/index?amount=${vm.payForm.pay_amt}&order_no=${vm.payForm.order_no}&payType=${vm.payForm.pay_channel}` })
								}
							})
						} else if (res.cancel) {
							vm.isSendPay = false
						}
					}
				})
			}

		},
		methods: {
			gopay() {
				const vm = this
				let data = this.info
				data.payType = this.zhufu.filter(v => v.isChoose)[0].payType
				console.log(data, 'payType')
				uni.showLoading({
					title: '支付中...',
					mask: true,
					icon: 'none',
					success: function() {
						vm.payResult = '0'
						console.log(data, '--this.info')
						vm.$request('order.create', data).then(async resp => {
							if (uni.getSystemInfoSync().platform == 'android') {
								let { expend } = resp.data
								if (data.payType == 'alipay_wap') {
									vm.isSendPay = true
									uni.hideLoading()
									let linkurl =
										'alipays://platformapi/startapp?saId=10000007&qrcode=' +
										expend.pay_info
									console.log(linkurl)
									plus.runtime.openURL(linkurl, err => {
										uni.showModal({
											title: '支付提示',
											content: err,
											success: res => {
												if (res.confirm) {
													console.log('用户点击确定')
												} else if (res.cancel) {
													vm.isSendPay = false
												}
											}
										})
									})
								} else {
									// const webview = plus.webview.create('', 'https://' + domain);
									// location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx96416556ea212863&response_type=code&scope=snsapi_base&agentid=90&redirect_uri=https%3A%2F%2Fnjhengyu.top%2Fapp%2F%23%2Fpages%2Fweixin-payment%2Findex'&state=STATE#wechat_redirect`
								}
							}else {
								vm.applePay.pay([vm.info.productId], async () => {
									let time = Date.now()
								
									// let str1 = 'orderId=1773357362057502722&time=1711636344313'
									// console.log('str1', str1, CryptoJS.HmacSHA256(str1, 'fdsajhDSFf34252FAF#er').toString())
								
									let str = `orderId=${resp.data.id}&time=${time}`
									const sign = CryptoJS.HmacSHA256(str, 'fdsajhDSFf34252FAF#er').toString()
									console.log(str, sign)
									let req = {
										orderId: resp.data.id,
										sign,
										time: time
									}
									console.log('0000', JSON.stringify(req))
									vm.$request('order.notify', req).then(resp1 => {
										console.log('order.notify resp: ', resp1)
										uni.redirectTo({ url: `/pages/paySuccess/index?amount=${resp.data.amount}&order_no=${resp.data.id}&payType=ApplePay` })
									})
								}, null, () => {})
							}
							
						})
					}
				})
			},
			choose(record, index) {
				if (this.zhufu[index].disabled) return
				this.zhufu.forEach(v1 => {
					v1.isChoose = false
				})
				record.isChoose = true
				this.payment = {
					...record,
					index
				}
				this.info.payType = record.payType
			}
		}
	}
</script>
<style lang="less" scoped>
	/* pages/jifenshangcheng/shouyintai/index.wxss */
	page {
		--color-primary: linear-gradient(90deg, #a110c7 0%, #10e5fb 100%);
	}

	// #c12931

	.box {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #111111;
		padding-bottom: 200rpx;
	}

	.bag {
		height: 240rpx;
		text-align: center;
		background: linear-gradient(90deg, #a110c7 0%, #10e5fb 100%);
		background-size: 100%;
		margin: 30rpx 30rpx 0;
		border-radius: 16rpx;
	}

	.timebox {
		/* padding-left: 163rpx; */
		padding-top: 48rpx;
		display: flex;
		align-items: center;
		width: 100%;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.time {
		width: 32rpx;
		height: 32rpx;
		margin-top: 5rpx;
		margin-right: 10rpx;
	}

	.moneybox {
		width: 100%;
		text-align: center;
		margin-top: 20rpx;
		font-size: 72rpx;
		font-family: DINAlternate-Bold;
		font-weight: bold;
		color: #ffffff;
	}

	.zhifubox {
		margin-left: 21rpx;
		margin-top: 20rpx;
		width: 710rpx;
		padding-bottom: 40rpx;
		background: #1c1c1c;
		border-radius: 10rpx;
	}

	.fukan {
		padding: 40rpx 0 20rpx 30rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
	}

	.wxzf {
		margin-top: 7rpx;
		width: 52rpx;
		height: 52rpx;
		// margin-left: 32rpx;
		margin-right: 18rpx;
	}

	.content {
		display: inline-block;
		width: 610rpx;
		height: 46rpx;
		padding-bottom: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #fff;
		display: flex;
		/* align-items: center; */
		justify-content: space-between;
		/* border-bottom: 1rpx solid #e4e4e4; */
	}

	.ccc {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 113rpx;
		border-bottom: 1px solid rgba(242, 242, 242, 0.1);
		margin: 0 32rpx;

		&:last-of-type {
			border-bottom: none;
		}
	}

	.ccc.disabled {
		opacity: 0.4;
	}

	.showimg {
		// margin-right: 30rpx;
		width: 36rpx;
		height: 36rpx;
		flex: 0 0 36rpx;
	}

	.dis {
		display: none;
	}

	.btn {
		margin-top: 160rpx;
		margin-left: 20rpx;
		width: 710rpx;
		height: 82rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		line-height: 82rpx;
		background: linear-gradient(90deg, #a110c7 0%, #10e5fb 100%);
		border-radius: 41rpx;
		position: fixed;
		bottom: 65px;
	}
</style>